<template>
  <div class="data-permission-con table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button class="gray-outline" size="medium" @click="show('add')">新增权限组</a-button>
          <a-button class="gray-outline ml10" size="medium" @click="editStatus">状态开关</a-button>
        </template>
        <template #tableBody>
          <a-table ref="table" size="mini" class="table-singe-line show-border-table" :loading="loading" row-key="id" v-model:selected-keys="ids" :row-selection="rowSelection" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="权限组名称" #cell="{ record }">{{ record.name }}</a-table-column>
              <a-table-column title="授权成员" #cell="{ record }">
                {{ record.userIdList && record.userIdList[0] ? record.userIdList.length : '' }}
              </a-table-column>
              <a-table-column title="状态" #cell="{ record }">
                {{ record.isEnable ? '已启用' : '已禁用' }}
              </a-table-column>
              <a-table-column title="备注" #cell="{ record }">
                <TextLimit rows="1">{{ record.remark }}</TextLimit>
              </a-table-column>
              <a-table-column title="操作" #cell="{ record }" :width="80">
                <a-space>
                  <a-button type="text" @click="showImpowerModal(record)">授权</a-button>
                  <a-dropdown>
                    <icon-more class="table-btn-more" />
                    <template #content>
                      <a-doption @click.stop="show('edit', record)">编辑</a-doption>
                      <a-doption @click.stop="show('copy', record)">复制</a-doption>
                      <a-doption @click.stop="del(record)">删除</a-doption>
                      <a-doption @click.stop="openLogList(record)">日志</a-doption>
                    </template>
                  </a-dropdown>
                </a-space>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>

  <AddDataPermission ref="addDataPermission" :type="type" :info="info" @save="sizeChange(pageNation.pageSize)" />
  <DataPermissionSwitch ref="dataPermissionSwitch" :ids="ids" @save="sizeChange(pageNation.pageSize)" />
  <Impower ref="impower" :info="info" @save="getList" />
  <CommonLogsDialog v-if="showLogDialog" api="pageDataPermissonGroupLog" :id="info.id" :isShow="showLogDialog" @closed="showLogDialog = false" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { Modal, Pagination, Message } from '@arco-design/web-vue'
  import { pageDataPermissonGroup, removeDataPermissonGroup } from '@/api/system'
  import TableWrap from '@/components/TableWrap.vue'
  import FilterTable from '@/components/TableFilter.vue'
  import AddDataPermission from './components/addDataPermission.vue'
  import DataPermissionSwitch from './components/dataPermissionSwitch.vue'
  import Impower from './components/impower.vue'
  import CommonLogsDialog from '@/components/Log/logsDialog.vue'

  export default defineComponent({
    components: { TableWrap, FilterTable, AddDataPermission, DataPermissionSwitch, Impower, CommonLogsDialog },
    setup() {
      const addDataPermission = ref()
      const dataPermissionSwitch = ref()
      const impower = ref()
      const data: any = reactive({
        filterItem: [
          {
            key: 'nameList',
            label: '权限组名称',
            value: ref(),
            type: 'input_search',
            width: 200,
          },
          {
            key: 'isEnable',
            label: '状态',
            value: ref(),
            type: 'select',
            width: 160,
            optionItems: [
              { label: '已启用', value: 1 },
              { label: '已禁用', value: 0 },
            ],
          },
        ],
        searchValue: {},
        tableList: [],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        type: '',
        info: {},
        loading: false,
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
        ids: [],
        showLogDialog: false,
      })
      const searchByVal = (info: any) => {
        data.searchValue = {}
        data.searchValue = info
        data.pageNation.pageNum = 1
        getList()
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const getList = async () => {
        let params = {
          ...data.searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.tableList = []
        data.ids = []
        data.loading = true
        const res: any = await pageDataPermissonGroup(params)
        data.tableList = res?.data?.records
        data.pageNation.total = res?.data?.total
        data.loading = false
      }

      const show = (type: string, item: any) => {
        data.type = type
        data.info = item || {}
        addDataPermission.value.visible = true
      }

      const del = (item: any) => {
        Modal.confirm({
          title: '提示',
          content: '是否删除权限组？',
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            let res: any = await removeDataPermissonGroup([item.id])
            if (res) {
              Message.success('删除成功')
              getList()
            }
          },
        })
      }

      const showImpowerModal = (item: any) => {
        data.info = item
        impower.value.visible = true
      }

      const editStatus = () => {
        if (!data.ids[0]) {
          return Message.error('请选择需要操作的数据')
        }
        dataPermissionSwitch.value.visible = true
      }

      const openLogList = (item: any) => {
        data.info = item
        data.showLogDialog = true
      }

      getList()

      return {
        ...(toRefs(data) as any),
        addDataPermission,
        searchByVal,
        changePage,
        sizeChange,
        show,
        del,
        dataPermissionSwitch,
        impower,
        showImpowerModal,
        getList,
        editStatus,
        openLogList,
      }
    },
  })
</script>

<style lang="less" scoped>
  .data-permission-con {
    height: calc(100vh - @menuHeight);
  }
</style>
